<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-height: 100vh;
            width: 100vw;
            display: flex;
            justify-content:center;
            align-items:center;
            background-color:#ccc;
        }
        .yinyang{
            --color1:black;
            --color2:white;
            width:20em;
            height: 20em;
            background-image: linear-gradient(var(--color1)  50%,var(--color2) 50%);
            display: flex;
            align-items:center;
            animation: rotating linear 5s infinite;
         
        }
        @keyframes rotating {
        to {
        transform: rotate(1turn);
        }
        }
        .yinyang::before,.yinyang::after{
            content:'';
            width:50%;
            height: 50%;
            /* mix-blend-mode: screen; */
            box-sizing: border-box;
           
        }
        .yinyang::before{
            --inner-color: var(--color1);
            --outer-color: var(--color2)
        }
        .yinyang::after{
            --inner-color: var(--color2);
            --outer-color: var(--color1)
        }
        .yinyang::before,.yinyang::after{
            background-color: var(--inner-color);
            border: 3.5em solid var(--outer-color);
        }
        .yinyang::after,.yinyang::before,.yinyang{
            border-radius: 50%;
        }
    </style>
</head>
<body>
     <div class="yinyang">

     </div> 
</body>
</html>